irongit
dotfiles/waybar/style/[Catppuccin] Mocha.css
299 lines4.8 KBCSS
1/* ---- 💫 https://github.com/JaKooLit 💫 ---- */
2/* Catppuccin Mocha */
3
4* {
5 font-family: "JetBrainsMono Nerd Font";
6 font-weight: bold;
7 min-height: 0;
8 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
9 font-size: 97%;
10 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
11}
12
13@import "../waybar/style/catppuccin-themes/mocha.css";
14
15window#waybar {
16 transition-property: background-color;
17 transition-duration: 0.5s;
18 background: transparent;
19 border-radius: 10px;
20}
21
22window#waybar.hidden {
23 opacity: 0.2;
24}
25
26window#waybar.empty,
27window#waybar.empty #window {
28 background-color: transparent;
29 padding: 0px;
30 border: 0px;
31}
32
33#taskbar button,
34#workspaces button {
35 color: @overlay1;
36 box-shadow: none;
37 text-shadow: none;
38 padding: 0px;
39 border-radius: 9px;
40 padding-left: 4px;
41 padding-right: 4px;
42 animation: gradient_f 20s ease-in infinite;
43 transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
44}
45
46#taskbar button:hover,
47#workspaces button:hover {
48 border-radius: 10px;
49 color: @peach;
50 background-color: @surface0;
51 padding-left: 2px;
52 padding-right: 2px;
53 animation: gradient_f 20s ease-in infinite;
54 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
55}
56
57#workspaces button.persistent {
58 color: @surface1;
59 border-radius: 10px;
60}
61
62#taskbar button.active,
63#workspaces button.active {
64 color: @mauve;
65 border-radius: 10px;
66 padding-left: 8px;
67 padding-right: 8px;
68 animation: gradient_f 20s ease-in infinite;
69 transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
70}
71
72#workspaces button.urgent {
73 color: @red;
74 border-radius: 0px;
75}
76
77/* This section can be use if you want to separate waybar modules */
78.modules-left, .modules-center, .modules-right {
79 background: @theme_base_color;
80 border: 0.5px solid @overlay0;
81 padding-top: 2px;
82 padding-bottom: 2px;
83 padding-right: 4px;
84 padding-left: 4px;
85 border-radius: 10px;
86}
87
88.modules-left, .modules-right {
89 border: 1px solid @blue;
90}
91
92#backlight,
93#backlight-slider,
94#battery,
95#bluetooth,
96#clock,
97#cpu,
98#disk,
99#idle_inhibitor,
100#keyboard-state,
101#memory,
102#mode,
103#mpris,
104#network,
105#power-profiles-daemon,
106#pulseaudio,
107#pulseaudio-slider,
108#taskbar button,
109#taskbar,
110#temperature,
111#tray,
112#window,
113#wireplumber,
114#workspaces,
115#custom-backlight,
116#custom-browser,
117#custom-cava_mviz,
118#custom-cycle_wall,
119#custom-dot_update,
120#custom-file_manager,
121#custom-keybinds,
122#custom-keyboard,
123#custom-light_dark,
124#custom-lock,
125#custom-hint,
126#custom-hypridle,
127#custom-menu,
128#custom-playerctl,
129#custom-power_vertical,
130#custom-power,
131#custom-quit,
132#custom-reboot,
133#custom-settings,
134#custom-spotify,
135#custom-swaync,
136#custom-tty,
137#custom-updater,
138#custom-weather,
139#custom-weather.clearNight,
140#custom-weather.cloudyFoggyDay,
141#custom-weather.cloudyFoggyNight,
142#custom-weather.default,
143#custom-weather.rainyDay,
144#custom-weather.rainyNight,
145#custom-weather.severe,
146#custom-weather.showyIcyDay,
147#custom-weather.snowyIcyNight,
148#custom-weather.sunnyDay {
149 padding-top: 4px;
150 padding-bottom: 4px;
151 padding-right: 6px;
152 padding-left: 6px;
153}
154/*-----Indicators----*/
155#custom-hypridle.notactive,
156#idle_inhibitor.activated {
157 color: #39FF14;
158}
159
160#bluetooth,
161#backlight {
162 color: @blue;
163}
164
165#battery {
166 color: @green;
167}
168
169@keyframes blink {
170 to {
171 color: @surface0;
172 }
173}
174
175#battery.critical:not(.charging) {
176 background-color: @red;
177 color: @theme_text_color;
178 animation-name: blink;
179 animation-duration: 3.0s;
180 animation-timing-function: steps(12);
181 animation-iteration-count: infinite;
182 animation-direction: alternate;
183 box-shadow: inset 0 -3px transparent;
184}
185
186#clock {
187 color: @yellow;
188}
189
190#cpu {
191 color: @green;
192}
193
194#custom-keyboard,
195#memory {
196 color: @sky;
197}
198
199#disk {
200 color: @sapphire;
201}
202
203#temperature {
204 color: @teal;
205}
206
207#temperature.critical {
208 background-color: @red;
209}
210
211#tray > .passive {
212 -gtk-icon-effect: dim;
213}
214#tray > .needs-attention {
215 -gtk-icon-effect: highlight;
216}
217
218#keyboard-state {
219 color: @flamingo;
220}
221
222#custom-cava_mviz {
223 color: @pink;
224}
225
226#custom-menu {
227 color: @rosewater;
228}
229
230#custom-power {
231 color: @red;
232}
233
234#custom-updater {
235 color: @red;
236}
237
238#custom-light_dark {
239 color: @blue;
240}
241
242#custom-weather {
243 color: @lavender;
244}
245
246#custom-lock {
247 color: @maroon;
248}
249
250#pulseaudio {
251 color: @sapphire;
252}
253
254#pulseaudio.bluetooth {
255 color: @pink;
256}
257#pulseaudio.muted {
258 color: @red;
259}
260
261#window {
262 color: @mauve;
263}
264
265#mpris {
266 color:@lavender;
267}
268
269#network {
270 color: @teal;
271}
272#network.disconnected,
273#network.disabled {
274 background-color: @surface0;
275 color: @text;
276}
277
278#backlight-slider slider,
279#pulseaudio-slider slider {
280 min-width: 0px;
281 min-height: 0px;
282 opacity: 0;
283 background-image: none;
284 border: none;
285 box-shadow: none;
286}
287
288#backlight-slider trough,
289#pulseaudio-slider trough {
290 min-width: 80px;
291 min-height: 5px;
292 border-radius: 5px;
293}
294
295#backlight-slider highlight,
296#pulseaudio-slider highlight {
297 min-height: 10px;
298 border-radius: 5px;
299}